<template>
    <div>
        <h1>Hello About</h1>
        <div v-if="userInfo">
            <p>用户姓名：{{ userInfo.name }}</p>
            <p>用户年龄：{{ userInfo.age }}</p>
        </div>
        <div v-else>
            <p>没有用户信息</p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'

const route = useRoute()

// 定义用户信息的接口
interface UserInfo {
    name: string;
    age: number;
}

// 正确解析 JSON 字符串并处理类型
const userInfo = computed(() => {
    try {
        // 确保 userInfo 存在且是字符串类型
        if (route.query.userInfo && typeof route.query.userInfo === 'string') {
            // 解析 JSON 字符串为对象
            const parsed = JSON.parse(route.query.userInfo)
            // 验证解析后的数据结构是否符合预期
            if (parsed && typeof parsed.name === 'string' && typeof parsed.age === 'number') {
                return parsed as UserInfo
            }
        }
        // 如果解析失败或数据结构不符合预期，返回默认值
        return {
            name: '默认用户',
            age: 0
        } as UserInfo
    } catch (error) {
        console.error('解析用户信息失败:', error)
        // 发生错误时返回默认值
        return {
            name: '默认用户',
            age: 0
        } as UserInfo
    }
})
</script>